<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useFreeApi } from '@/api/base/freeApi'
import { Local, Session } from '@/utils/storage'
import { useAppState } from '@/stores/appState'
import { Refresh } from '@element-plus/icons-vue'

const { mobile } = useAppState()
const { get_hot_list_all } = useFreeApi()

interface Row {
  title: string
  hot: string
  index: number
  url: string
  mobilUrl: string
}

interface DataRowContent {
  data: Row[]
  name: string
  subtitle: string
  update_time: string
}

const loading = ref(false)
const current = ref(Local.get('get_hot_list_all_current') || '百度热点')
const items = ref<DataRowContent[]>(Session.get('get_hot_list_all') || [])
const currentItem = computed(() => {
  return items.value.find((f) => f.name === current.value)
})

const onFetch = async () => {
  loading.value = true
  const { data } = await get_hot_list_all<DataRowContent[]>()
  if (data.length) {
    items.value = data
    Session.set('get_hot_list_all', data)
  }
  loading.value = false
}

const onChange = () => {
  Local.set('get_hot_list_all_current', current.value)
}

const openPage = (item: Row) => {
  if (mobile) {
    window.open(item.mobilUrl)
  } else {
    window.open(item.url)
  }
}

const getTitleColorClass = (index: number) => {
  if (index === 0) {
    return { color: 'var(--el-color-danger)' }
  } else if (index === 1) {
    return { color: 'var(--el-color-danger-light-3)' }
  } else if (index === 2) {
    return { color: 'var(--el-color-warning)' }
  } else {
    return { color: 'var(--el-color-info)' }
  }
}

onMounted(() => {
  if (!items.value.length) onFetch()
})
</script>

<template>
  <div class="w100 home-hot">
    <div class="flex align-center justify-between border-default-bottom pb5 mb5">
      <span class="font-bold">热搜热榜聚合</span>
      <div>
        <el-select v-model="current" style="width: 130px" @change="onChange">
          <el-option
            v-for="(item, index) in items"
            :key="index"
            :label="`${item.name} [${item.subtitle}]`"
            :value="item.name"
          />
        </el-select>
        <el-button
          :icon="Refresh"
          circle
          @click="onFetch"
          title="刷新待办"
          :loading="loading"
          class="ml5"
        />
      </div>
    </div>
    <div v-if="currentItem">
      <div
        v-for="(item, index) in currentItem.data.slice(0, 15)"
        :key="index"
        class="current-item flex justify-between py5 cursor-pointer cursor-pointer-line"
        @click="openPage(item)"
      >
        <div
          class="text-center flex-shrink font-bold"
          style="width: 25px"
          :style="getTitleColorClass(index)"
        >
          {{ item.index }}
        </div>
        <div class="flex-grow pr5" style="line-height: 16px">{{ item.title }}</div>
        <span class="ml-auto font12 flex-shrink font-bold" :style="getTitleColorClass(index)">{{
          item.hot
        }}</span>
      </div>
    </div>
    <el-empty v-else :image-size="30" description="加载中..."></el-empty>
  </div>
</template>
<style lang="scss" scoped>
.home-hot {
  .current-item:nth-child(even) {
    background-color: var(--el-fill-color-lighter);
  }
}
</style>
